import { ImgResize } from "../../img-size/core/img-resize";

export class ImageClip{
    protected casHeight: number;
    protected casWidth: number;
    protected drawImageSize: {height: number, width: number};
    protected casEle: HTMLCanvasElement;
    protected imgResizeIntance: ImgResize;
    constructor(ele: HTMLElement, protected settings: ISettings = {}) {
        this.casEle = document.createElement('canvas');
        this.casHeight = ele.clientHeight;
        this.casWidth = ele.clientWidth;
        this.casEle.setAttribute('height', this.casHeight + 'px');
        this.casEle.setAttribute('width', this.casWidth + 'px');
        ele.appendChild(this.casEle);
        this.imgResizeIntance = new ImgResize(ele, {
            content: {
                style: {
                    'background-color': '#000000', 
                    opacity: 0.3
                }
            }, 
            limit: {
                maxHeight: 200,
                maxWidth: 200,
                minHeight: 20,
                minWidth: 20,
                maxLeft: 300,
                maxTop: 300,
                minTop: 0,
                minLeft: 0
            }
        });
        this.init();
    }
    public updateSetting(setting: ISettings) {

    }
    protected getImageSize(src: string): Promise<{height: number, width: number}> {
        return new Promise(resolve => {
            var image = new Image();
            image.src = src;    
            image.onload =() => {  
                resolve({width: image.width, height: image.height});
            }
            image.onerror = () => {
                resolve({height: 1,width: 1});
            }             
        });
    }
    protected drawImage() {
        this.calculateDrawSize().then(res => {
            this.drawImageSize = res;
            let start = { x: (this.casWidth - res.width) / 2, y: (this.casHeight - res.height) / 2};
            let ctx = this.casEle.getContext('2d') as CanvasRenderingContext2D;
            let image = new Image();
            image.src = this.settings.src;
            ctx.drawImage(image, start.x, start.y, res.width, res.height)
        });
    }
    protected calculateDrawSize(): Promise<{width: number, height: number}> {
        return new Promise(resolve => {
            this.getImageSize(this.settings.src).then(res => {
                console.log(res)
                if(res.height > res.width) {
                    let width = this.casHeight / res.height * res.width;
                    resolve({height: this.casHeight, width: width});
                } else {
                    let height = this.casWidth/res.width*res.height;
                    resolve({width: this.casWidth, height: height});
                }
            });
        });
    }
    protected init() {
        this.casEle.setAttribute('height', String(this.casHeight) + 'px');
        this.casEle.setAttribute('width', String(this.casWidth) + 'px');
        this.drawImage();
    }
}
export interface ISettings {
    src?: string;
}